<template>
	<view class="content-box">
		<view class="fixed">
			<view class="content1">
				<Head></Head>
			</view>
			<view class="content2">
				<Banner></Banner>
			</view>
		</view>
		<div class="main-center">
		      <h1>新闻列表</h1>
		      <ul class="newsul">
		        <li v-for="(i,index) in list" :key="index" @click="detail(i.id)">
		          <span class="titlespan">{{i.title}}</span>
		          <span class="dataspan">{{i.create_time}}</span>
		        </li>
		      </ul>
		
		    </div>
		<Foot></Foot>
	</view>
</template>

<script>
	import Head from '@/components/head.vue'
	import Banner from '@/components/banner.vue'
	import Foot from '@/components/foot.vue'
	export default {
		components: {
			Head,
			Banner,
			Foot
		},
		data() {
			return {
				list:[],
				        url:'http://nj.donglianguoji.com/index/getNews?catId=46&',
				        page:1,
				        size:20,
				        total:0
			};
		},
		onLoad() {
			
						
						uni.request({
							url:this.url+'page='+this.page+'&limit='+this.size,
							method:'GET',
							success: (res) => {
								console.log(res.data.data)
			        this.list = res.data.data
			        this.total = res.data.data.length
							}
						})
		},
		methods:{
			detail(id){
				uni.navigateTo({
					url:'../detail/detail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.main-center{
    max-width: 900px;
    margin: 0 auto;
    padding: 180px 0;
		min-height: 500px;
  }
	h1{
		margin-bottom: 30px;
	}
  .newsul{
    display: flex;
    flex-direction: column;
    li{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      cursor: pointer;
      border-bottom: 1px solid #e1e1e1;
      padding: 15px 0;
      font-size: 15px;
      line-height: 15px;
      .titlespan{
        flex: 1;
        color: #303030;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .dataspan{
        width: 200px;
        color: #9d9d9d;
        margin-left: 200px;
				text-align: right;
      }
    }
    li:hover{
      background: #f0f0f0;
    }
  }
  .pagebox{
    margin-top: 30px;
  }
	ul,li{
		list-style: none;
		padding: 0;
	}
	
	@media screen and (max-width: 750px){
		.main-center{
		  margin: auto 20px ;
		  padding: 80px 0 100px 0;
		}
		.newsul{
			li{
				flex-direction: column;
				.dataspan{
				  width: 200px;
				  color: #9d9d9d;
				  margin-left: 0px;
					margin-top: 15px;
					text-align: left;
				}
			}
		}
	}
</style>
